<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="收款码管理" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>
		

		
		<view v-for="(item,index) in shoukuanlist" :key=index class="mt20"  style="padding:20rpx 30rpx;background-color: #ffffff;display: flex;justify-content: space-between;">
			<view style="display: flex;flex-direction: column">
				<view>积分比例</view>
				<view style="font-size:60rpx">{{item.bili}}%</view>
				
			</view>
			<view>
				<view style="display: flex;flex-direction: column;">
					<view style="display: flex;justify-content: flex-end;">
						<u-switch asyncChange v-model="item.status==1?true:false" @change="asyncChange(item)"  ></u-switch>
					</view>
					<view style="display: flex;justify-content: flex-end;font-size:24rpx;color:#666666">
						设为默认
					</view>
					<view v-if="index === 0" style="display: flex;justify-content: flex-end;font-size:24rpx;color:orangered">
						*该比例为签约比例不可禁用
					</view>
				</view>
			</view>
		</view>
		
		<view style="position: absolute;bottom:0;width: 100%;">
			<u-button type="primary" color="#3ACD90" text="添加比例" @click="addbili"></u-button>
		</view>
		
		<u-picker @confirm="confirmText" @cancel="cancelText" :show="bilishow" :columns="bilicolumns" title='积分比例'></u-picker>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:true,
				shoukuanlist:[
					{
						id:1,
						status:1,
						bili:20,
					},
					{
						id:2,
						status:0,
						bili:11
					},
					{
						id:3,
						status:1,
						bili:33
					}
				],
				bilishow:false,
				bilicolumns: [
				    ['3%','4%','5%','6%','7%','8%','9%','10%','11%','12%','13%','14%','15%','16%','17%','18%','19%','20%']
				],
			}
		},
		onLoad(){
			
		},
		methods: {
			asyncChange(e) {
				console.log(e)
				e.status = !e.status
			},
			addbili(){
				this.bilishow = true
			},
			confirmText(){
				console.log('confirm')
				this.bilishow = false
			},
			cancelText(){
				console.log('cancelText')
				this.bilishow = false
			}
		}
	}
</script>

<style>
</style>